<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="600" height="500"></canvas>
</body>
</html>
<script>
    var cxt=document.querySelector('canvas').getContext('2d')
    // setInterval(function(){
    //     var x=Math.floor(Math.random()*600)
    //     var y=Math.floor(Math.random()*500)
    //     var w=Math.floor(Math.random()*(600-x))
    //     var h=Math.floor(Math.random()*(500-y))
    //     cxt.strokeStyle=color()
    //     cxt.fillStyle=color()
    //     var n=Math.floor(Math.random()*2)
    //     if(n===0){
    //         cxt.fillRect(x,y,w,h)
    //     }else{
    //         cxt.strokeRect(x,y,w,h)
    //     }
    // },100)
    function color(){
        var r=Math.floor(Math.random()*250)
        var g=Math.floor(Math.random()*250)
        var b=Math.floor(Math.random()*250)
        return 'rgb('+r+','+g+','+b+')'
    }
    var canvas_ = document.querySelector("canvas");
    if(canvas_.width>canvas_.height){
        var maxR=canvas_.height/2
    }else{
        var maxR=canvas_.width/2
    }
    setInterval(function(){
        cxt.beginPath()
        var r=Math.floor(Math.random()*maxR);
        var x=Math.floor(Math.random()*(600-r*2))+r;
        var y=Math.floor(Math.random()*(500-r*2))+r;
        cxt.strokeStyle=color()
        cxt.fillStyle=color()
        var n=Math.floor(Math.random()*2)
        cxt.arc(x,y,r,0,Math.PI*2)
        if(n==0){
            cxt.stroke()
        }else{
            cxt.fill()
        }
    },100)
</script>